<template>
    <view class="container flex-column">
        <!-- 密码 -->
        <view class="view-input flex-row center-row" style="margin: 140rpx 0 40rpx 0">
            <image
                class="input-lefticon"
                src="https://mcdn.chatgk.com/xcx/static/images/login/password.png"
                mode="aspectFit"
            ></image>
            <view class="view-line"></view>
            <input class="input" v-model="password" :password="true" @input="onInputChange" placeholder="请输入密码" />
        </view>

        <!-- 确认密码 -->
        <view class="view-input flex-row center-row">
            <image
                class="input-lefticon"
                src="https://mcdn.chatgk.com/xcx/static/images/login/password.png"
                mode="aspectFit"
            ></image>
            <view class="view-line"></view>
            <input
                class="input"
                v-model="confirmPassword"
                :password="true"
                @input="onInputChange"
                placeholder="请确认密码"
            />
        </view>
        <!-- 确定 -->
        <button class="button-loging" :class="isAvailable ? 'available' : ''" @tap="onClickSubmit">确定</button>
        <!-- <loading v-show="loadshow"></loading> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            loadshow: false,
            isAvailable: false, // 确定按钮是否可用
            password: '',
            confirmPassword: ''
        };
    },
    onBackPress(event) {
        if (event.from == 'navigateBack') {
            return false;
        }

        if (event.from == 'backbutton') {
            uni.navigateBack({
                delta: 4
            });
            return true;
        }
    },
    methods: {
        // 输入框值改变
        onInputChange() {
            this.checkIsAvailable();
        },
        // 点击确定
        onClickSubmit() {
            if (!this.isAvailable) {
                return;
            }

            if (this.password != this.confirmPassword) {
                uni.showToast({
                    title: '两次密码不相同',
                    icon: 'error'
                });
            } else {
                this.loadshow = true;
                this.$request
                    .setPwd({
                        password: this.password
                    })
                    .then((res) => {
                        this.loadshow = false;
                        uni.showToast({
                            title: '密码设置成功',
                            icon: 'success',
                            mask: true
                        });

                        const userInfo = getApp().globalData.userInfo;

                        if (!userInfo.pid) {
                            uni.navigateTo({
                                url: '/subpackages/subpackage2/pages/login/perfect-info'
                            });
                        } else {
                            uni.navigateBack({
                                delta: 4
                            });
                        }
                    });
            }
        },
        // 检查确定是否可用
        checkIsAvailable() {
            this.isAvailable = this.confirmPassword.length > 0 && this.password.length > 0;
        }
    }
};
</script>

<style>
button::after {
    border: none;
}

.center-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.container {
    padding: 0 76rpx 0 76rpx;
}

.view-input {
    height: 80rpx;
    border: 2rpx solid #d8d8d8;
    border-radius: 20rpx;
}

.input-lefticon {
    width: 44rpx;
    height: 40rpx;
    margin: 0 30rpx 0 30rpx;
}

.view-line {
    width: 2rpx;
    height: 44rpx;
    background-color: #d8d8d8;
}

.input {
    width: 260rpx;
    color: #464646;
    caret-color: #464646;
    font-size: 28rpx;
    margin: 0 20rpx 0 38rpx;
}

.button-loging {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 28rpx;
    font-weight: bold;
    background: #ff3b0a;
    border-radius: 20rpx;
    margin-top: 150rpx;
}

.button-loging.available {
    background-color: #ff3b0a;
}
</style>
